/*
* 190105迭代
* 添加搜索字段 costCenterGroupCategoryId
* 表格添加字段 costCenterGroupCategoryName
* */
import React from 'react'
import {connect} from 'react-redux'
import {messages} from "share/common";
import menuRoute from 'routes/menuRoute'
import {Button, Table, Badge, Popover} from 'antd';
import config from 'config';
import SlideFrame from 'components/slide-frame'
import SearchArea from 'components/search-area';
import CostCenterGroupService from 'containers/setting/cost-center-group/cost-center-group.service';
import EditCostCenterGroup from "containers/setting/cost-center-group/edit-cost-center-group";
import 'styles/setting/cost-center-group/cost-center-group-define.scss';
import ResizeTable from "components/resize-table";

class CostCenterGroupDefine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      param: {
        costCenterGroupCategoryId: undefined,
        setOfBooksId: undefined,
        costCenterGroupCode: undefined,
        costCenterGroupName: undefined,
      },
      searchForm: [
        {
          type: 'list',
          single: true,
          id: 'costCenterGroupCategoryId',
          label: messages('setting.key1664')/*成本中心组类别*/,
          listType: 'cost_center_group_class',
          labelKey: 'name',
          valueKey: 'id',
          placeholder: messages('setting.key1137')/*请选择*/,
        },
        {
          type: 'select',
          id: 'setOfBooksId',
          label: messages('setting.key368'/*账套*/),
          options: [],
          method: 'get',
          valueKey: 'id',
          labelKey: 'setOfBooksName',
          getParams: {roleType: 'TENANT'},
          getUrl: `${config.baseUrl}/api/setOfBooks/by/tenant`
        }, //账套
        {type: 'input', id: 'costCenterGroupCode', label: messages('setting.key369'/*成本中心组代码*/)},
        {type: 'input', id: 'costCenterGroupName', label: messages('setting.key370'/*成本中心组名称*/)}
      ],
      loading: false,
      pagination: {
        total: 0,
        page: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      data: [],
      columns: [
        {
          title: messages('setting.key380')/*账套*/,
          dataIndex: 'setOfBooksName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key1665')/*成本中心组类别名称*/,
          dataIndex: 'costCenterGroupCategoryName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key369'/*成本中心组代码*/),
          dataIndex: 'costCenterGroupCode',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key370'/*成本中心组名称*/),
          dataIndex: 'costCenterGroupName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key199'/*描述*/),
          dataIndex: 'description',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'enabled',
          render: (text) => {
            return <span><Badge status={text ? "success" : 'error'}/>
              {text ? messages('common.enabled')/*启用*/ : messages('common.status.disable')/*禁用*/}</span>
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'operate',
          render: (value, record) => {
            return (
              <span>
                <a onClick={(e) => this.onClickEdit(e, record)}>{messages('common.edit')/*编辑*/}</a>
                <a onClick={(e) => this.onRecordDetail(e, record)}
                   style={{marginLeft: '8px'}}>{messages('common.detail')/*详情*/}</a>
              </span>
            )
          }
        }
      ],
      visible: false,
      record: {
        id: null,
        enabled: true,
        costCenterGroupCode: null,
        costCenterGroupName: null,
        setOfBooksName: null,
        description: null,
        setOfBooksId: null,
      },
      costCenterGroupDetail: menuRoute.getRouteItem('cost-center-group-detail', 'key').url,
    }
  }

  componentWillMount() {
    this.getCostCenterGroupList();
  };


  //获取成本中心组list
  getCostCenterGroupList = () => {
    const {pagination, param} = this.state;
    this.setState({
      loading: true,
    });
    let params = {
      "page": pagination.page,
      "size": pagination.pageSize,
      "costCenterGroupCategoryId": param.costCenterGroupCategoryId,
      "setOfBooksId": param.setOfBooksId,
      "costCenterGroupCode": param.costCenterGroupCode,
      'costCenterGroupName': param.costCenterGroupName
    };
    CostCenterGroupService.getCostCenterGroupList(params).then(res => {
      pagination.total = Number(res.headers['x-total-count']) || 0;
      pagination.current = pagination.page + 1;
      this.setState({
        data: res.data,
        pagination,
        loading: false,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击搜索
  onSearch = (result) => {
    const {pagination} = this.state;
    pagination.page = 0;
    this.setState({
      param: result,
      pagination
    }, () => {
      this.getCostCenterGroupList()
    });
  };
  //分页点击
  onChangePager = (_pagination, filters, sorter) => {
    let pagination = this.state.pagination;
    pagination.page = _pagination.current - 1;
    pagination.pageSize = _pagination.pageSize;
    this.setState({
      pagination,
    }, () => {
      this.getCostCenterGroupList();
    })
  };

  //点击新建
  onClickNew = () => {
    this.setState({
      record: {
        id: null,
        enabled: true,
        costCenterGroupCode: null,
        costCenterGroupName: null,
        setOfBooksName: null,
        description: null,
        setOfBooksId: null,
      },
    });
    this.showSlide(true);
  };

  //点击编辑
  onClickEdit = (e, record) => {
    this.setState({
      record,
    }, () => {
      this.showSlide(true);
    });

  };

  //侧滑关闭后
  afterCloseSlide = () => {
    this.getCostCenterGroupList();
    this.showSlide(false);
  };

  //show侧滑
  showSlide = (flag) => {
    this.setState({
      visible: flag,
    })
  };

  //点击每一行的详情
  onRecordDetail = (e, record) => {
    const {costCenterGroupDetail} = this.state;
    this.setState({
      record: record,
    });
    this.context.router.push({
      pathname: costCenterGroupDetail,
      state: {
        id: record.id,
        costCenterGroupCode: record.costCenterGroupCode
      }
    })
  };

  //点击重置
  clear = () => {
    let pagination = this.state.pagination;
    pagination.page = 0;
    pagination.total = 0;
    this.setState({
      pagination,
      param: {
        costCenterGroupCategoryId: undefined,
        setOfBooksId: undefined,
        costCenterGroupCode: undefined,
        costCenterGroupName: undefined,
      },
    }, () => {
      this.getCostCenterGroupList();
    })
  };

  render() {
    const {searchForm, data, columns, loading, visible, pagination, record} = this.state;
    return (
      <div className={'cost-center-group-define'}>
        <h3>{messages('setting.key371'/*成本中心组定义*/)}</h3>
        <SearchArea searchForm={searchForm} submitHandle={this.onSearch} clearHandle={this.clear}/>
        <br/>
        <Button onClick={this.onClickNew} type={'primary'}>{messages('common.create')/*新建*/}</Button>
        <div style={{marginTop: 10, marginBottom: 10}}>
          {messages('common.total', {total: `${pagination.total}`})}{/*共搜索到{pagination.total}条数据*/}
        </div>
        <div className={'cost-center-group-define-table'}>
          <ResizeTable
            bordered
            size={'middle'}
            rowKey={'id'}
            dataSource={data}
            columns={columns}
            loading={loading}
            onChange={this.onChangePager}
            pagination={pagination}
          />
        </div>
        <div>
          <SlideFrame title={record.id ? messages('setting.key383'/*编辑成本中心组*/) : messages('setting.key372'/*新建成本中心组*/)}
                      show={visible}
                      content={EditCostCenterGroup}
                      afterClose={this.afterCloseSlide}
                      onClose={() => this.showSlide(false)}
                      params={{record: this.state.record, show: visible}}/>
        </div>
      </div>
    )
  }

}

CostCenterGroupDefine.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps)(CostCenterGroupDefine);
